<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消控坐标点</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="assets/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="assets/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="assets/css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
    <link href="assets/css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">
    <link href="assets/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="assets/css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
    <link href="assets/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="assets/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/ipicture/css/iPicture_location.css" rel="stylesheet">
    <link href="assets/img/log.ico" rel="shortcut icon">
    <style type="text/css">
        .mapBall{
            width:20px;
            height:20px;
            background: red;
            border-radius: 50%;
            position: absolute;
        }
        .table>tbody>tr>td{
            text-align:center;
            line-height: 15px;
            font-size: 15px;
        }
        .table>thead:first-child>tr:first-child>th{
            text-align:center;
        }
        .bottom_location{
            width: 100%;
            position: absolute;
            top: 90px;
            bottom: 0px;
            left: 0px;
        }
        .HKbuttonBlue{
            border:none;
            border-radius: 2px;
            background-color: #3f85e4;
            color:#ffffff;
            width:90px;
            height: 30px;
        }
        .HKbuttonBlue:hover{
            background-color: #3876cb;
        }
        .HKbuttonBlue:active{
            background-color: #2d5fa4;
        }
        .HKbuttonBlue:disabled{
            background-color: #3f85e4;
            opacity: 20;
        }
        .HKbuttonGray{
            outline: none;
            border:1px solid #cccccc;
            border-radius: 2px;
            background-color: #ffffff;
            color:#666666;
            width:90px;
            height: 30px;
        }
        .HKbuttonGray:hover{
            border-color: #3876cb;
            color:#3876cb;
        }
        .HKbuttonGray:active{
            border-color: #2d5fa4;
            color:#2d5fa4;
        }
        .HKbuttonGray:disabled{
            border-color: #eaeaea;
            background-color: #f3f3f3;
            color:#cccccc;
        }
    </style>
</head>
<body>
<div id="wrapper"style="height: 100%">
    <div class="gray-bg dashbard-1 animated fadeInRight" style="height: 100%">
        <div class="row wrapper border-bottom white-bg page-heading" style="height: 8%">
            <div class="col-lg-9">
                <h2>监测点坐标编辑</h2>
            </div>
        </div>
        <div class="wrapper wrapper-content" style="height: 92%">
            <div class="row"style="height: 100%">
                <div class="panel panel-default" style="margin-bottom: 0px" style="height: 100%">
                    <div class="panel-body" style="height: 100%">
                        <table id="monitor_no_map_table" class="table table-bordered table-striped" style="width: 100%;height: 100%">
                            <thead>
                            <tr>
                                <th>监测点名称</th>
                                <th>所属用户信息传输装置</th>
                                <th>用户信息传输装置ID</th>
                                <th>报警回路号</th>
                                <th>区域</th>
                                <th>建筑物</th>
                                <th>楼层</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="monitor_no_map_body">

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal inmodal" id="updateModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog" style="width:900px;margin:20px auto">
                        <div class="modal-content animated bounceInDown">
                            <div class="modal-header">
                                <h4 class="modal-title">修改监测点</h4>
                            </div>
                            <div class="modal-body" style="padding: 1px 1px 1px 1px ">
                                <form id="updateForm" class="form-horizontal">
                                    <div id="iPictureUpdate" data-interaction="hover">
                                        <div class="ip_slide">
                                            <img id="mapImgUpdate" src="assets/img/error.jpg" alt="加载地图失败" width="100%" onclick="mapOnClick2(event)" />
                                            <div id="posUpdate" class="ip_tooltip ip_img32" style="top: 10px; left: 10px;"  data-round="roundBgR">
                                            </div>
                                        </div>
                                    </div>
                                    <input id="posXUpdate" type="text" style="display: none">
                                    <input id="posYUpdate" type="text" style="display: none">
                                    <input id="monitorID" style="display: none;" type="text"  class="form-control" >
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button id="updateMonitorCANCEL" type="button" class="HKbuttonGray" data-dismiss="modal">&nbsp;&nbsp;取消</button>
                                <button id="updateMonitorSave" type="button" class="HKbuttonBlue">&nbsp;&nbsp;保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="assets/js/jquery-2.1.1.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="assets/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/js/plugins/peity/jquery.peity.min.js"></script>
<script src="assets/js/demo/peity-demo.js"></script>
<script src="assets/js/inspinia.js"></script>
<script src="assets/js/plugins/pace/pace.min.js"></script>
<script src="assets/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/js/plugins/gritter/jquery.gritter.min.js"></script>
<script src="assets/js/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="assets/js/plugins/toastr/toastr.min.js"></script>
<script src="assets/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="assets/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="assets/js/plugins/dataTables/dataTables.responsive.js"></script>
<script src="assets/js/plugins/dataTables/dataTables.tableTools.min.js"></script>
<script src="assets/js/plugins/fullcalendar/moment.min.js"></script>
<script src="assets/js/plugins/daterangepicker/daterangepicker.js"></script>
<script src="assets/layer-v2.2/layer/layer_location.js"></script>
<script src="assets/ipicture/js/jquery.ipicture_location.js"></script>
<script src="assets/customize.js"></script>
<script src="assets/js/alert_check.js"></script>

<script>
    $(function () {
        initMonitorTable();
    });

    function initMonitorTable() {
        monitorTable = $('#monitor_no_map_table').DataTable({
            columns:[
                {data: "name"},
                {data: "device.detail"},
                {data: "device.device_id"},
                {data: "sensor_id"},
                {data: "geo1"},
                {data: "geo2"},
                {data: "geo3"},
            ],
            ajax:"${baseURL}/json/xk_monitor_geo/getAll" ,
            columnDefs:[{
                targets:7,
                render: function (data, type, row, meta) {
                    var obj = encodeURIComponent(JSON.stringify(row));
                    return   '<div  class="col-sm-12" style="padding: 0 0 0 0;"><button data-toggle="modal" data-target="#updateModal" onclick='+"editBtn("+'"'+obj+'"'+")"+ ' type="button" class="HKbuttonBlue" style="padding: 0 0 0 0;">&nbsp;&nbsp;地&nbsp;图</button></div>'
                }
            },
                {   'orderable': false,
                    'targets': 7
                }],

            language:{
                "sProcessing":   "处理中...",
                "sLengthMenu":   "显示 _MENU_ 项结果",
                "sZeroRecords":  "没有匹配结果",
                "sInfo":         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty":    "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix":  "",
                "sSearch":       "搜索:",
                "sUrl":          "",
                "sEmptyTable":     "表中数据为空。",
                "sLoadingRecords": "载入中...",
                "sInfoThousands":  ",",
                "oPaginate": {
                    "sFirst":    "首页",
                    "sPrevious": "上页",
                    "sNext":     "下页",
                    "sLast":     "末页"
                },
                "oAria": {
                    "sSortAscending":  ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
    }

    function editBtn(obj){
        var data = JSON.parse(decodeURIComponent(obj));
        var x = data.pos_x;
        var y = data.pos_y;
        var ID = data.geo3_id;
        $("#monitorID").val(data.id);
        $("#mapImgUpdate").attr("src", "${baseURL}/picture/geo_location/download?id=" + ID);
        $("#mapImgUpdate").load(function () {
            $("#posUpdate").css({
                "left":($("#mapImgUpdate").width()) * x + "px",
                "top":($("#mapImgUpdate").height()) * y + "px",
            });
            $("#iPictureUpdate").iPicture_base();
        });
        $("#posXUpdate").val(x);
        $("#posYUpdate").val(y);

    }
    function delMonitor(id) {
        var index = layer.load(0, {shade: false});
        $.ajax({
            url:'${baseURL}/xkMonitor/delete?id=' + id,
            success:function (data) {
                layer.alert('数据删除成功！',{
                    closeBtn: 0
                });
                monitorTable.ajax.reload();
                layer.close(index);
            }
        });
    }
    function mapOnClick2(e){
        e = e || window.event;
        var imgId ='#'+ $(e.target).attr('id');
        var currentWidth = $(imgId).width();
        var currentHeight = $(imgId).height();
        var offsetX = e.pageX - $(imgId).offset().left;
        var offsetY = e.pageY - $(imgId).offset().top;
        var x = offsetX / currentWidth;
        var y = offsetY / currentHeight;
        console.log("onClick");
        $("#posUpdate").css({
            "left":($("#mapImgUpdate").width()) * x + "px",
            "top":($("#mapImgUpdate").height()) * y + "px",
        });
        $("#posXUpdate").val(x);
        $("#posYUpdate").val(y);
    }
    $("#updateMonitorSave").click(function(){
        var id = parseInt($("#monitorID").val());
        var pos_x = $("#posXUpdate").val();
        var pos_y = $("#posYUpdate").val();
        var dataString = {
            "id":id,
            "pos_x":pos_x,
            "pos_y":pos_y,
        };
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/json/xk_monitor_geo/update_pos",
            async: false,
            data: JSON.stringify(dataString),
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "修改成功。",
                        type: "success"
                    },function(){
                        monitorTable.ajax.reload();
                        $("#updateMonitorCANCEL").click();
                    });
                }else{
                    console.log("请求异常");
                    swal({
                        title: "请求异常",
                        type: "error"
                    });
                }
            },
            error:function(){
                console.log("请求异常");
                swal({
                    title: "请求异常。",
                    type: "error"
                })
            }
        });
    });
</script>

</body>
</html>